<template>
    <el-dialog :model-value="props.visible" width="50%" @close="handleClose">
        <div id="pdf-content" ref="printArea">
            <table class="order-table">
                <colgroup>
                    <col style="width: 16.67%;">
                    <col style="width: 16.67%;">
                    <col style="width: 16.67%;">
                    <col style="width: 16.67%;">
                    <col style="width: 16.67%;">
                    <col style="width: 16.67%;">
                </colgroup>
                <caption>
                    <h3>餐具盒生产工单</h3>
                </caption>
                <tr class="img-col">
                    <td colspan="6">
                        <img class="product-image" :src="detail.fileUrl || ''" alt="">
                    </td>
                </tr>
                <tr>
                    <td class="field-title">备注：</td>
                    <td colspan="5" class="not-center">
                        {{ detail.remark || '' }}
                    </td>
                </tr>
                <tr>
                    <td class="field-title">客户名称：</td>
                    <td colspan="2">{{ detail.customerName || '' }}</td>
                    <td class="field-title">制单日期：</td>
                    <td colspan="2">{{ detail.createTime || '' }}</td>
                </tr>
                <tr>
                    <td class="field-title">配件款式：</td>
                    <td colspan="2">{{  detail.specsDetail || ''  }}</td>
                    <td class="field-title">交付日期：</td>
                    <td colspan="2">{{ detail.deliveryDate || '' }}</td>
                </tr>
                <tr>
                    <td class="field-title">生产单号：</td>
                    <td colspan="5" class="not-center">{{  detail.produceOrderCode || '' }}</td>
                </tr>
                <tr>
                    <td class="field-title">生产工序：</td>
                    <td colspan="5" class="not-center">
                        <el-steps style="width: 100%;" align-center>
                            <el-step v-for="(item, index) in detail.dataList" :key="index" :title="item.workName" status="finish" />
                        </el-steps>
                    </td>
                </tr>
                <tr>
                    <td class="field-title">制单人：</td>
                    <td colspan="2">{{  detail.createByName || ''}}</td>
                    <td class="field-title">生产数量：</td>
                    <td colspan="2">{{  detail.number || 0  }}</td>
                </tr>
                <tr>
                    <td class="field-title">图片下载：</td>
                    <td colspan="5" class="not-center">
                        <img :src="detail.codeUrl" alt="">
                    </td>
                </tr>
            </table>
        </div>
        <div class="order-info">
            <div><h3 style="text-align: center;">工序详情</h3></div>
            <el-timeline style="max-width: 600px">
                <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp">
                    {{ activity.content }}
                </el-timeline-item>
            </el-timeline>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" :disabled="!shouldPrint" size="large" v-print="'#pdf-content'">打印</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">

import { printOrderDetailApi } from '@/api/sj/productManagement/BOMProductOrder';
import { jsPDF } from "jspdf";
import html2canvas from "html2canvas";

const props = defineProps<{
    visible: boolean;
    initList?: any,
}>();
const emits = defineEmits(['close']);
const detail = ref<any>();
const packageCost = ref(0);
const assembleCost = ref(0);

const shouldPrint = ref(true);
const printArea = ref<HTMLElement | null>(null);

const activities = [
  {
    content: 'Event start',
    timestamp: '2018-04-15',
  },
  {
    content: 'Approved',
    timestamp: '2018-04-13',
  },
  {
    content: 'Success',
    timestamp: '2018-04-11',
  },
  {
    content: 'Success',
    timestamp: '2018-04-11',
  },
  {
    content: 'Success',
    timestamp: '2018-04-11',
  },
  {
    content: 'Success',
    timestamp: '2018-04-11',
  },
  {
    content: 'Success',
    timestamp: '2018-04-11',
  },
  {
    content: 'Success',
    timestamp: '2018-04-11',
  },
  {
    content: 'Success',
    timestamp: '2018-04-11',
  },
  {
    content: 'Success',
    timestamp: '2018-04-11',
  },
  {
    content: 'Success',
    timestamp: '2018-04-11',
  },
]

watch(() => props.initList, (newData) => {
    detail.value = newData
})

const generatePDF = async () => {
    const element = document.getElementById("pdf-content");
    // const element = document.querySelector('#order-table');
    if (element) {
        // A4 页面宽度和高度（单位：毫米）
        const pdfWidth = 210;
        const pdfHeight = 297;
        const canvas = await html2canvas(element, { useCORS: true, scale: 2 });
        const imgData = canvas.toDataURL("image/jpeg", 0.98);
        // 计算内容的实际比例
        const contentWidth = canvas.width;
        const contentHeight = canvas.height;
        const pageHeight = (contentHeight * pdfWidth) / contentWidth;
        let position = 0;
        const pdf = new jsPDF({
            orientation: "portrait",
            unit: "mm",
            format: "a4"
        });
        // 判断内容是否需要分页
        if (pageHeight < pdfHeight) {
            pdf.addImage(imgData, "JPEG", 0, 0, pdfWidth, pageHeight);
        } else {
            while (position < contentHeight) {
                pdf.addImage(imgData, "JPEG", 0, position, pdfWidth, pageHeight);
                position -= pdfHeight;
                if (position < contentHeight) {
                    pdf.addPage();
                };
            };
        };
        const pdfBlob = pdf.output("blob");
        // pdfUrl.value = URL.createObjectURL(pdfBlob); 
        pdf.save("document.pdf");
    };
};

const onClickPrint = async () => {
    if (printArea.value) {
        // 保存当前页面的原始内容
        const originalContent = document.body.innerHTML
        // 获取要打印的内容
        const printContent = printArea.value.innerHTML

        // 替换页面内容为要打印的内容
        document.body.innerHTML = printContent

        // 调用打印
        window.print()

        // 打印后恢复原始内容
        document.body.innerHTML = originalContent

        // location.reload() // 可选：刷新页面以恢复事件监听
    };
    // await printOrderDetailApi({id: detail.value.id});
};

const handleClose = () => {
    console.log('close')
    emits('close');
};

</script>

<style lang="scss" scoped>
#pdf-content {
    display: flex;
    justify-content: center;
    flex-flow: wrap
}

.order-table {
    border-spacing: 0;
    border: 1px solid black;
    width: 90%;
    font-size: 20px;

    tr {
        border: 1px solid black;
    }

    td {
        border: 1px solid black;
        text-align: center;
    }

    .img-col {
        text-align: center;

        .product-image {
            height: 250px;
        }

        .order-numbe {
            color: blue
        }
    }

    .not-center {
        text-align: left;
    }

    .code-image {
        height: 100px
    }

    .inventory-alert {
        color: red;
    }

    .field-title {
        font-weight: bold;
    }

    .auxiliary-name {
        color: #69AFF0;
        text-align: left;

        span {
            display: block
        }

        font-size: 20px;
    }

}

.order-info {
    margin: 20px auto;
    width: 90%;
    font-size: 15px;
    max-height: 200px;
    overflow-x: auto;
}

// .order-info-container{
//     margin-top:20px;
//     display: flex;
//     justify-content: center;
//     font-size: 20px;
//     .order-info{
//         width: 80%;
//     }
// }
</style>